<template>
  <div class="system-post-container">
    <el-card shadow="hover">
      <div class="system-user-search mb15">
        <el-form :model="queryParams" ref="queryRef" :inline="true">
          <el-form-item label="登录IP" prop="ipaddr">
            <el-input size="default" v-model="queryParams.ipaddr" placeholder="请输入登录IP" class="w-50 m-2"
                      clearable/>
          </el-form-item>
          <el-form-item label="用户名称" prop="userName">
            <el-input size="default" v-model="queryParams.userName" placeholder="请输入登录名称" class="w-50 m-2"
                      clearable/>
          </el-form-item>
          <el-form-item>
            <el-button size="default" type="primary" class="ml10" @click="getList">
              <el-icon>
                <ele-Search/>
              </el-icon>
              查询
            </el-button>
            <el-button size="default" type="danger" class="ml10" @click="onRowDel(null)">
              <el-icon>
                <ele-Delete/>
              </el-icon>
              强制退出
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-table :data="users" style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center"/>
        <el-table-column prop="token" label="会话编号" show-overflow-tooltip></el-table-column>
        <el-table-column prop="userName" label="登录名称"></el-table-column>
        <el-table-column prop="userNickname" label="用户昵称">
          <template #default="scope">
            <div style="display: inline-flex; align-items: center;">
              <img :src="scope.row.avatar" style="width: 20px;height: 20px;border-radius: 50%;margin-right: 10px;"/>
              <span>{{ scope.row.userNickname }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="ip" label="主机"></el-table-column>
        <el-table-column prop="city" label="IP归属" show-overflow-tooltip></el-table-column>
        <el-table-column prop="sourceName" label="操作端"/>
        <el-table-column show-overflow-tooltip label="应用ID">
          <template #default="scope">
            <span class="cur-pointer color-primary" @click="handleAppDetail(scope.row.sourceId)">{{ scope.row.sourceId }}</span>
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip label="浏览器">
          <template #default="scope">
            {{ scope.row.terminal }} / {{ scope.row.browser }}
          </template>
        </el-table-column>

        <el-table-column prop="time" width="180" label="登录时间"></el-table-column>
        <el-table-column label="操作" width="100">
          <template #default="scope">
            <el-button size="small" text type="primary" @click="onRowDel(scope.row)">强退</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="list-pagination">
        <el-pagination
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            v-model:current-page="queryParams.pageNum"
            v-model:page-size="queryParams.pageSize"
            :page-sizes="[10, 20, 30, 50]"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"/>
      </div>
    </el-card>
  </div>
</template>

<script lang="ts">
import {toRefs, reactive, onMounted, defineComponent, ref} from 'vue';
import {ElMessageBox, ElMessage, FormInstance} from 'element-plus';
import {forceLogout, listSysUserOnline} from "/@/api/system/monitor/userOnline";

export default defineComponent({
  name: 'apiV1SystemOnlineList',
  setup() {
    const queryRef = ref();
    const appDetailRef = ref();
    const state = reactive({
      queryParams: {
        keywords: "",
        // type: 0,
        pageNum: 1,
        pageSize: 20,
      },
      tokens: [],
      users: [],
      total: 0
    });
    const getList = () => {
      listSysUserOnline(state.queryParams).then(res => {
        state.users = res.data.list;
        state.total = res.data.total;
        state.queryParams.pageNum = res.data.pageNum;
        state.queryParams.pageSize = res.data.pageSize;
      })
    };
    /** 重置按钮操作 */
    const resetQuery = (formEl: FormInstance | undefined) => {
      // if (!formEl) return
      // formEl.resetFields()
      // getList()
    };
    // 删除岗位
    const onRowDel = (row: object) => {
      let msg = '你确定要强制退出用户登录？';
      let _tokens = [];
      if (row) {
        msg = `将强制用户下线，是否继续?`
        _tokens = [row.token]
      } else {
        _tokens = state.tokens
      }
      if (_tokens.length === 0) {
        ElMessage.error('请选择要强制退出登录的用户。');
        return
      }
      ElMessageBox.confirm(msg, '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      })
          .then(() => {
            forceLogout({tokens: _tokens}).then(() => {
              ElMessage.success('退出成功');
              getList();
            })
          })
          .catch(() => {
          });
    };
    const handleSizeChange = (_size: number) => {
      state.queryParams.pageNum = 1
      state.queryParams.pageSize = _size
      getList();
    };
    const handleCurrentChange = (_page: number) => {
      state.queryParams.pageNum = _page
      getList();
    };
    // 页面加载时
    onMounted(() => {
      getList();
    });
    // 多选框选中数据
    const handleSelectionChange = (selection: any) => {
      state.tokens = selection.map(item => item.token)
    };
    const handleAppDetail = (_id: string) => {

    };
    return {
      queryRef,
      onRowDel,
      getList,
      handleSelectionChange,
      resetQuery,
      handleSizeChange,
      handleCurrentChange,
      handleAppDetail,
      ...toRefs(state),
    };
  },
});
</script>
